<!--
@function: 表格模板列-下拉
@author:HYS
@description:
选中改变之后，会触发value-change事件，传出参数为所选中的选项
@modify:刘举人 
@modifyContent 修改了下拉默认显示文字span

@modify:ljr 2018-6-23
修改内容：添加了数据回显功能。通过prop参数selectDefault，在create方法调用时回显
-->
<template>
  <el-dropdown class="dropdown-column" split-button type="primary" trigger="click" @command="handleCommand">
    <span v-if="Object.keys(selected).length === 0">请选择</span>
    <span v-else>&emsp;{{selected.value}}&emsp;</span>
    <el-dropdown-menu slot="dropdown">
      <template v-for="(item,index) in dropdownItems">
        <el-dropdown-item :command="item">{{item.value}}</el-dropdown-item>
      </template>
    </el-dropdown-menu>
  </el-dropdown>
</template>
<script>
export default {
  name:"DropdownColumn",
  props:{
    dropdownItems:{
      type:Array,
      default:()=>{
        return [];
      }
    },
    selectDefault:{
      type:String,
      default:""
    }
  },
  methods:{
    handleCommand:function(selected) {
      this.selected = selected;
      this.$emit("value-change", selected);
    }
  },
  data(){
    return {
      selected:{}
    };
  },
  created:function(){
    // this.selected = this.dropdownItems[0];
    if(this.selectDefault !== ""){
      this.selected.value = this.selectDefault;
      this.$emit("value-change", this.selected);
    }
  }
}
</script>
<style lang="scss">

.dropdown-column{
  padding-left: 5px;
  border-radius: 0px;
  float:left;
  text-align: left;
}

</style>
